<template>
  <view class="container">
    <z-paging-swiper>
      <view slot="top">
        <u-navbar height="50" title="客户详情" title-size="36" title-color="#333"></u-navbar>
        <view class="view_box">
          <u-avatar src="" size="90"></u-avatar>
          <view class="view-info">
            <view>
              <!-- {{customer.userCompany}} -->
              {{ nickname }}
            </view>
            <view class="view-info-p"> 邀请时间{{ formatTime(customer.brokerageTime) }} </view>
          </view>
          <view
            @click="routeTo('/other_center/salesman-customer-edit/salesman-customer-edit?id=' + id)"
          >
            完善信息
          </view>
        </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
        <view class="tabs">
          <view
            :class="scurrent == 0 ? `item` : ''"
            style="padding: 30rpx 0"
            @click="tabsChange(0)"
          >
            基本信息
          </view>
          <view
            :class="scurrent == 1 ? `item` : ''"
            style="padding: 30rpx 0"
            @click="tabsChange(1)"
          >
            下单次数
          </view>
        </view>
      </view>
      <swiper
        class="swiperView"
        :current="scurrent"
        @transition="transition"
        @animationfinish="animationfinish"
      >
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging"
            v-model="itemList"
            @query="queryList"
            :fixed="true"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="content">
              <view class="info-item">
                <view class="info-title"> 备注 </view>
                <p v-if="have" class="info-desc">{{ customer.userAlias }}</p>
                <p v-else class="info-desc">未添加</p>
              </view>
            </view>

            <view class="content">
              <view class="info-item">
                <view class="info-title"> 电话 </view>
                <p v-if="have" class="info-desc">{{ customer.userMobile }}</p>
                <p v-else class="info-desc">未添加</p>
              </view>
            </view>

            <!-- <view class="content">
							<view class="info-item">
								<view class="info-title">
									电话
								</view>
								<p v-if="have" class="info-desc">176****668</p>
								<p v-else class="info-desc">未添加</p>
							</view>
						</view> -->

            <view class="content">
              <view class="info-item">
                <view class="info-title"> 单位 </view>
                <p v-if="have" class="info-desc">{{ customer.userCompany }}</p>
                <p v-else class="info-desc">未添加</p>
              </view>
            </view>
            <view class="content">
              <view class="info-item">
                <view class="info-title"> 位置 </view>
                <p v-if="have" class="info-desc">{{ customer.userLocation }}</p>
                <p v-else class="info-desc">未添加</p>
              </view>
            </view>
          </z-paging>
        </swiper-item>
        <swiper-item class="swiperItem">
          <z-paging
            ref="paging2"
            v-model="itemList2"
            @query="queryList"
            :fixed="false"
            :auto="false"
            :empty-view-img="`${getImageUrl('empty.png')} `"
            empty-view-text="暂无订单数据~"
            :empty-view-img-style="imgStyle"
          >
            <view class="content_area">
              <view class="" style="background-color: #eeeeef">
                <view class="content-cat">
                  <view class=""> 下单时间 </view>
                  <view class=""> 成交金额 </view>
                  <view class=""> 订单状态 </view>
                </view>

                <view
                  class="view_box2"
                  @click="routeTo"
                  v-for="(item, index) in itemList2"
                  :key="index"
                >
                  <view class="" style="flex: 4">
                    {{ formatTime(item.createTime) }}
                  </view>
                  <view class="" style="flex: 3"> ¥{{ (item.payPrice * 0.01).toFixed(2) }} </view>

                  <view v-if="item.afterSaleStatus == 1" class="" style="flex: 3"> 售后中 </view>
                  <view v-else-if="item.afterSaleStatus == 20" class=""> 售后成功 </view>
                  <view v-else-if="item.status == 0" class="" style="flex: 3"> 待付款 </view>
                  <view v-else-if="item.status == 10" class="" style="flex: 3"> 待发货 </view>
                  <view v-else-if="item.status == 20" class="" style="flex: 3"> 待收货 </view>
                  <view v-else-if="item.status == 30" class="" style="flex: 3"> 已完成 </view>
                  <view v-else-if="item.status == 40" class="" style="flex: 3; color: #ff4445">
                    已取消
                    <p>已退款¥{{ (item.payPrice * 0.01).toFixed(2) }}</p>
                  </view>
                </view>
              </view>
            </view>
          </z-paging>
        </swiper-item>
      </swiper>
    </z-paging-swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      have: true,
      nickname: '',
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      scurrent: 0,
      tabsList: [
        {
          name: '抢单'
        },
        {
          name: '会话'
        }
      ],
      itemList: [
        {
          status: 1
        },
        {
          status: 2
        },
        {
          status: 3
        }
      ],
      itemList2: [],
      customer: {}
    }
  },
  onLoad(res) {
    this.id = res.id
    this.nickname = res.nickname
    this.$u
      .get('/app-api/trade/brokerage-user/get-customer?customerUserId=' + res.id)
      .then((res) => {
        this.customer = res.data
      })
  },
  onShow() {
    this.$u
      .get('/app-api/trade/brokerage-user/get-customer?customerUserId=' + this.id)
      .then((res) => {
        this.customer = res.data
      })
  },
  computed: {
    formatTime() {
      return (e) => this.$utils.parseTime(e)
    }
  },
  methods: {
    back() {
      uni.switchTab({
        url: '/pages/ucenter/ucenter'
      })
    },
    tabsChange(index) {
      this.scurrent = index
    },
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    animationfinish(e) {
      this.current = e.detail.current
      this.scurrent = e.detail.current
      this.$refs.uTabs.setFinishCurrent(e.detail.current)
      if (this.current == 1 && this.itemList2.length == 0) {
        this.queryList()
      }
    },
    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get('/app-api/trade/brokerage-record/my-customer-trade-pge', {
          pageNo,
          pageSize,
          customerUserId: this.id
        })
        .then((res) => {
          this.$refs.paging2.complete(res.data.list)
        })
    },

    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style scoped>
page {
  height: 100%;
  background: #fff;
}

.view_box {
  display: flex;
  padding: 20rpx;
  align-items: center;
  background-color: #fff;
  border-bottom: #ededed solid 2rpx;
}

.view-info {
  flex: 1;
  margin-left: 10rpx;
  line-height: 55rpx;
}

.view-info-p {
  font-size: 26rpx;
  color: #999;
}

.view-tip {
  width: 90rpx;
  height: 90rpx;
  border-radius: 90rpx;
  color: #fff;
  font-size: 24rpx;
  line-height: 90rpx;
  text-align: center;
}

.tabs {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
}

.item {
  border-bottom: #0f76bb solid 8rpx;
  color: #0f76bb;
}

.content_area {
  padding: 20rpx;
}

.content-cat {
  display: flex;
  justify-content: space-around;
}

.view_box2 {
  display: flex;
  justify-content: space-evenly;
  height: 90rpx;
  align-items: center;
  font-size: 26rpx;
  text-align: center;
}

.content {
  padding: 15rpx 20rpx;
}

.info-desc {
  padding: 25rpx;
  background-color: #f6f6f6;
  margin: 5rpx 0;
}
</style>
